<template>
  <div class="site_header">
    <img src="@/assets/element-plus-logo.svg" />
    <span>
      <span>Admin</span>
      <span class="logout" @click="onLogout">登出</span>
    </span>
  </div>
</template>
<script setup>
import { logout } from "@/network/api";
import { useRouter } from "vue-router";
const router = useRouter();
const onLogout = () => {
  logout().finally(() => {
    // 不管成功失败都处理
    sessionStorage.setItem("token", "");
    router.replace({
      path: "/login",
    });
  });
};
</script>
<style lang="scss" scoped>
.site_header {
  padding: 4px 0;
  width: 100%;
  height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 176px;
    height: 40px;
  }
  .logout {
    cursor: pointer;
    margin-left: 8px;
    &:hover {
      color: #409eff;
    }
  }
}
</style>
